<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<title>班级管理 - 学生管理系统</title>
	<link rel="stylesheet" href="../css/public.css" />
	<script>
		function setActive() {
			var buttons = document.getElementsByTagName("button");
			for (var i = 0; i < buttons.length; i++) {
				buttons[i].addEventListener("click", function () {
					for (var j = 0; j < buttons.length; j++) {
						buttons[j].classList.remove("active");
					}
					this.classList.add("active");
				});
			}
		}
	</script>
</head>

<body onload="setActive()">
	<header>
		<h1>学生管理系统</h1>
		<nav>
			<a href="../index.html"><button>首页</button></a>
			<a href="student.html"><button>学生管理</button></a>
			<button class="active">班级管理</button>
		</nav>
	</header>
	<main>
		<h2>班级信息表</h2>
		<div class="search_box">
			<input type="text" id="searchInput" placeholder="请输入班级关键字进行搜索..." onkeyup="get_by_keyword(this.value)" />
		</div>
		<table id="studentTable" class="table_main">
			<thead>
				<tr>
					<th>班级id</th>
					<th>班级名称</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="data_info"></tbody>
		</table>
		<div class="div_in_container">
			<div class="div_input_son_container">
				<h3>添加班级</h3>
				<div id="add_clas">
					<input type="text" name="" id="add_clas_input" placeholder="请输入班级名" />
				</div>
				<button onclick="handle_add()">添加班级</button>
			</div>
			<div class="div_input_son_container">
				<h3>编辑班级</h3>
				<div id="edit_clas"></div>
				<button onclick="">保存</button>
			</div>
		</div>
	</main>
</body>
<script src="../js/request.js"></script>
<script>
	function get_by_keyword(keyword) {
		getData("http://127.0.0.1:6100/api/clas/?keyword=" + keyword, function (error, data) {
			if (error) {
				console.error("请求出错", error);
			} else {
				var tbody = document.getElementById("data_info")
				tbody.innerHTML = ""
				data["data"].forEach(function (value, index, array) {
					//value:{"id: 2 ,name":"云计算2301"}

					var tr = document.createElement("tr")
					var clasid = document.createElement("td")
					clasid.innerText = value["id"]
					var classname = document.createElement("td")
					classname.innerText = value["name"]

					var operate = document.createElement("td")
					var edit = document.createElement("span")
					edit.innerText = "编辑"
					operate.appendChild(edit)

					var del = document.createElement("span")
					del.innerText = "删除"

					del.addEventListener("click",function () {
						handle_delete(value["id"]);
					});

					operate.appendChild(del)

					// 挂载
					tr.appendChild(clasid)
					tr.appendChild(classname)
					tr.appendChild(operate)
					tbody.appendChild(tr)
				})

			}
		});
	}
	get_by_keyword("")
 

	//增加
	function handle_add() {
		var inp = document.getElementById("add_clas_input")
		if (inp.value == "") {
			alert("请输入班级名称")
		} else{
			postData("http://127.0.0.1:6100/api/clas", {id: 0, name: inp.value}, function (err,data) {
				if (err) {
					console.error(err);
				} else {
					alert("新增成功");
					location.reload()
				}
			});
		}
	}
	// 删除
	function  handle_delete(id) {
		if (confirm("你确定要删除id为" + id + "的班级吗？")) {
			deleteData("http://127.0.0.1:6100/api/clas/" + id, function (err,
            data) {
				if (err) {
					console.error(err);
				} else {
					alert("删除成功");
					location.reload()
				}
			});
		} else{
			//用户点击了“取消”
			console.log("用户选择了取消");
		}
	}	
</script>

</html>